<template>
  <div>
    <el-card>
      <div v-if="skuAttr.length > 0">
        <!-- 表单组件 -->
        <el-table border stripe class="table_content" :data="skuAttr">
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="80"
            fixed
          />
          <el-table-column
            label="名称"
            align="center"
            prop="skuName"
            width="250"
          />
          <el-table-column
            label="描述"
            align="center"
            prop="skuDesc"
            width="350"
          />
          <el-table-column label="默认图片" align="center" width="200">
            <template #default="{ row }">
              <el-image
                :src="row.skuDefaultImg"
                style="width: 100px; height: 100px"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="重量(g)"
            align="center"
            prop="weight"
            width="120"
          />
          <el-table-column
            label="价格(元)"
            align="center"
            prop="price"
            width="120"
          />
          <el-table-column
            label="操作"
            align="center"
            width="280"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button
                :title="row.isSale === 1 ? '下架' : '上架'"
                :type="row.isSale === 1 ? 'primary' : 'success'"
                size="small"
                :icon="row.isSale === 1 ? 'Bottom' : 'Top'"
                @click="updateSale(row)"
              />
              <el-button
                title="修改"
                type="warning"
                size="small"
                icon="Edit"
                @click="updateSku"
              />
              <el-button
                title="查看"
                type="info"
                size="small"
                icon="View"
                @click="showSkuInfo(row)"
              />
              <el-popconfirm
                :title="`确定要删除${row.skuName}这个SKU吗？`"
                width="250"
                icon="Delete"
                @confirm="deleteSku(row)"
              >
                <template #reference>
                  <el-button
                    title="删除"
                    type="danger"
                    size="small"
                    icon="Delete"
                  />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :size="'default'"
          :disabled="false"
          :background="true"
          layout="prev, pager, next, jumper, ->, total, sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 抽屉组件 -->
        <el-drawer
          v-model="drawer"
          :direction="direction"
          size="40%"
          :before-close="handleClose"
        >
          <template #header>
            <h2>查看商品详情</h2>
          </template>
          <template #default>
            <el-row class="sku_show_row">
              <el-col :span="5">名称</el-col>
              <el-col :span="19">{{ skuInfo.skuName }}</el-col>
            </el-row>
            <el-row class="sku_show_row">
              <el-col :span="5">描述</el-col>
              <el-col :span="19">{{ skuInfo.skuDesc }}</el-col>
            </el-row>
            <el-row class="sku_show_row">
              <el-col :span="5">价格</el-col>
              <el-col :span="19">{{ skuInfo.price }} 元</el-col>
            </el-row>
            <el-row class="sku_show_row">
              <el-col :span="5">平台属性</el-col>
              <el-col :span="19">
                <el-tag
                  class="sku_show_tag"
                  v-for="(item, index) in skuInfo.skuAttrValueList"
                  :key="item.id"
                  :color="getColorByIndex(index)"
                  size="small"
                >
                  {{ item.attrName }} : {{ item.valueName }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row class="sku_show_row">
              <el-col :span="5">销售属性</el-col>
              <el-col :span="19">
                <el-tag
                  class="sku_show_tag"
                  v-for="(item, index) in skuInfo.skuSaleAttrValueList"
                  :key="item.id"
                  :color="getColorByIndex(index)"
                  size="small"
                >
                  {{ item.saleAttrName }} : {{ item.saleAttrValueName }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row class="sku_show_row">
              <el-col :span="4">商品图片</el-col>
              <el-col :span="20">
                <el-carousel :interval="1000" type="card" height="200px">
                  <el-carousel-item
                    v-for="item in skuInfo.skuImageList"
                    :key="item.id"
                  >
                    <el-image
                      :src="item.imgUrl"
                      style="width: 100%; height: 100%"
                    />
                  </el-carousel-item>
                </el-carousel>
              </el-col>
            </el-row>
          </template>
        </el-drawer>
      </div>
      <el-empty v-else />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 引入接口
import {
  reqGetSkuList,
  reqSkuOnSale,
  reqSkuCancelSale,
  reqGetSkuDetail,
  reqDeleteSku,
} from '@/api/product/sku'
// 引入数据类型
import {
  SkuData,
  SkuInfoResponseData,
  SkuListResponseData,
} from '@/api/product/sku/type'
import { DrawerProps, ElMessage } from 'element-plus'

// 定义当前页
let currentPage = ref<number>(1)
// 定义每页记录数
let pageSize = ref<number>(10)
// 定义总记录数
let total = ref<number>(0)
// 定义 SKU 列表
let skuAttr = ref<SkuData[]>([])
// 定义抽屉组件是否展示
let drawer = ref<boolean>(false)
// 定义抽屉组件展开的方向
const direction = ref<DrawerProps['direction']>('rtl')
// SKU 详情
let skuInfo = ref<SkuData>({})
// 声明 tag 标签的颜色数组
const colors = ['#5de627', '#1ed0ef', '#f4ce0e', '#f6812e', '#0768fb']

// 渲染 tag 标签的颜色
const getColorByIndex = (index: number) => {
  // 确保颜色数组的索引不会超出范围，可循环或按需处理
  return colors[index % colors.length]
}

// 组件挂载完成收集数据
onMounted(() => {
  getSkuList()
})

// 删除 SKU
const deleteSku = async (row: SkuData) => {
  let result = await reqDeleteSku(row.id as number)
  if (result.code === 200) {
    ElMessage.success('删除成功！')
  } else {
    ElMessage.error('删除失败！')
  }
  await getSkuList(
    skuAttr.value.length > 0 ? currentPage.value : currentPage.value - 1,
  )
}

// 显示 SKU 信息
const showSkuInfo = (row: SkuData) => {
  getSkuDetail(row.id as number)
  drawer.value = true
}

// 抽屉组件关闭
const handleClose = () => {
  drawer.value = false
  skuInfo.value = {}
}

// 获取 SKU 详情
const getSkuDetail = async (skuId: number | string) => {
  let result: SkuInfoResponseData = await reqGetSkuDetail(skuId)
  if (result.code === 200) {
    skuInfo.value = result.data
  }
}

// 更新 SKU
const updateSku = () => {
  ElMessage.warning('暂未开发')
}

// SKU 上架下架
const updateSale = async (row: SkuData) => {
  if (row.isSale === 1) {
    let result = await reqSkuCancelSale(row.id as number)
    if (result.code === 200) {
      ElMessage.info('下架成功！')
    }
  }
  if (row.isSale === 0) {
    let result = await reqSkuOnSale(row.id as number)
    if (result.code === 200) {
      ElMessage.success('上架成功！')
    }
  }
  await getSkuList(currentPage.value)
}

// 获取数据
const getSkuList = async (page = 1) => {
  currentPage.value = page
  let result: SkuListResponseData = await reqGetSkuList(
    currentPage.value,
    pageSize.value,
  )
  if (result.code === 200) {
    total.value = result.data.total
    skuAttr.value = result.data.records
  }
}

// 监听每页记录数变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getSkuList()
}
// 监听当前页变化
const handleCurrentChange = (val: number) => {
  getSkuList(val)
}
</script>

<style scoped>
.table_content {
  margin: 10px 0;
}
.sku_show_row {
  margin: 20px 0;
}
.sku_show_tag {
  margin: 2px 5px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
